<template>
  <view class="container">
    <!-- 公告信息 -->
    <view class="notice-contain">
      <u-notice-bar
        :text="texts"
        direction="column"
        color="#f6823e"
        font-size="28rpx"
        bgColor="#fff"></u-notice-bar>
    </view>
    <!-- 瀑布流 -->
    <view class="waterFall">
      <!-- 第一个盒子 -->
      <view class="item" v-for="item in diyList" :key="item.id">
        <img
          :src="`http://localhost:8080/api/files/${item.dessertImg}`"
          alt=""
          style="width: 260rpx; height: 260rpx" />

        <view class="text">
          <view class="name">{{ item.dessertName }}</view>
          <view class="info">
            <view class="specs">{{ item.specs }}</view>
            <view class="price">￥{{ item.dessertPrice }}</view>
          </view>
        </view>

        <view class="btn" @click="goBook(item)">预订</view>

        <!-- 下架蒙层 -->
        <view class="mask" v-show="item.status === 1">暂时下架</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getAllDiyDessertService } from '@/api/dessert.js'
const texts = ref([
  '亲手制作蛋糕，享受diy过程',
  '可以选择店内甜品师指导~',
  '可以带图来进行diy哦~',
])

const diyList = ref([])
const getAllDiy = async () => {
  const res = await getAllDiyDessertService()
  if (res.code === '0') {
    diyList.value = res.data || []
  }
}
getAllDiy()

// 预约DIY
const goBook = (item) => {
  uni.navigateTo({
    url: `/pages/diyOrder/diyOrder?diyDessert=${encodeURIComponent(
      JSON.stringify(item)
    )}`,
  })
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  overflow: auto;

  .notice-contain {
    width: 100%;
    margin: 10rpx 0;
  }
  .waterFall {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 10rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 350rpx;
      height: 520rpx;
      text-align: center;
      background-color: #fff;
      border-radius: 20rpx;
      position: relative;
      box-sizing: border-box;
      padding: 20rpx 0;
      margin-bottom: 20rpx;

      .text {
        width: 100%;
        text-align: left;
        box-sizing: border-box;
        padding: 10rpx;

        .name {
          height: 100rpx;
          font-size: 36rpx;
          font-weight: bold;
          letter-spacing: 1px;
          margin-bottom: 10rpx;
        }

        .info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .specs {
            color: #666;
            font-size: 28rpx;
          }

          .price {
            font-size: 32rpx;
            color: #bc7958;
            font-weight: bold;
          }
        }
      }

      .btn {
        width: 180rpx;
        height: 50rpx;
        line-height: 50rpx;
        border-radius: 100px;
        background: linear-gradient(to right, #f9acb4, #f9e6e8);
        color: #fff;
        font-size: 30rpx;
        font-weight: bold;
        letter-spacing: 6rpx;
        margin: 0 auto;
      }

      .mask {
        width: 350rpx;
        height: 520rpx;
        line-height: 400rpx;
        border-radius: 10px;
        color: #fff;
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        background: rgba(0, 0, 0, 0.25);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }

  .empty {
    font-size: 36rpx;
    color: #c1c1c1;
    letter-spacing: 6rpx;
    position: absolute;
    bottom: 400rpx;
    left: 280rpx;
  }
}
</style>
